<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 23:13:35
 * @LastEditTime: 2024-03-30 16:06:23
 * @FilePath: \env-manager-pc\src\views\system\role\index.vue
-->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import Edit from './edit.vue'
import { ModelType } from '@/types/common'
import userApi from '@/api/modules/user'
import type { doLoading } from '@/types/page'

const tableData = ref<any>([])
const loading = ref(false)
const editRef = ref()

function getTableData() {
  loading.value = true
  userApi.GetRoleList().then((res) => {
    tableData.value = res as any
    loading.value = false
  }, () => {
    loading.value = false
  })
}

function toCreate() {
  editRef.value?.open({ type: ModelType.add })
}

function toEdit(row: any) {
  editRef.value.open({
    data: row,
    type: ModelType.edit,
  })
}

getTableData()

async function submitEdit(formData: any, doLoading: doLoading) {
  try {
    doLoading(true)
    const isCreate = !formData.ObjID
    const res: any = isCreate
      ? await userApi.AddRole({
        role: { ...formData, Popedoms: null },
      })
      : await userApi.UpdateRole({
        role: { ...formData, Popedoms: null },
      })

    await userApi.SetRolePopedoms({
      roleObjID: res.ObjID,
      popedoms: formData.Popedoms,
    })
    doLoading(false)
    getTableData()
    editRef.value.close()
    ElMessage.success({
      message: isCreate ? '新增成功' : '编辑成功',
      type: 'success',
    })
  }
  catch (e) {
    doLoading(false)
  }
}

async function toDel(row: any) {
  await ElMessageBox.confirm(`确定删除角色 ${row.Name} 吗？`, '提示', {
    type: 'warning',
  })
  await userApi.DeleteRole({ roleObjID: row.ObjID })
  ElMessage.success({
    message: '删除成功',
    type: 'success',
  })
  getTableData()
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <!-- <ElCol :span="6">
              <ElFormItem label="角色">
                <ElInput />
              </ElFormItem>
            </ElCol> -->
            <ElCol :span="6" :push="18" class="flex flex-justify-end">
              <!-- <ElButton type="primary">
                查询
              </ElButton> -->
              <ElButton type="success" @click="toCreate">
                新增
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="35">
        <vxe-table
          auto-resize border
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn type="seq" title="序号" width="80" />
          <VxeColumn field="Name" title="角色名称" min-width="100" />
          <VxeColumn field="Remark" title="备注" min-width="100" />
          <VxeColumn field="operate" title="操作" width="160">
            <template #default="{ row }">
              <ElButton type="success" link @click="toEdit(row)">
                编辑
              </ElButton>
              <ElButton type="danger" link @click="toDel(row)">
                删除
              </ElButton>
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
    </PageMain>
    <Edit ref="editRef" @submit="submitEdit" />
  </div>
</template>
